<!DOCTYPE html>
<html lang="zh" data-theme="lofi">

<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>面料处理</title>
	
	
	

  <script type="module" crossorigin src="./assets/index.1668141f.js"></script>
  <link rel="stylesheet" href="./assets/index.68eff0cd.css">
</head>

<body>
	<div class="h-screen w-full flex flex-col  overflow-hidden items-center ">
		<!-- header -->
		<div class="w-full h-14 flex justify-evenly items-center m-2 flex-shrink-0" id ="header">
			<input type="file" id="inputImage" accept="image/*" class="form-control file-input w-full max-w-xs ">
			<button id="resume" class="btn">查看原图</button>
		</div>
		<!-- Content -->
		<div class="w-full h-full img-container relative "  id="Content">
			<div id="rulerText" class="text-input absolute inset-0 m-auto w-20 h-20 bg-gray-400 bg-opacity-5 rounded-lg pointer-events-none z-50 flex items-center justify-center text-2xl text-white text-opacity-90 glass top-0 left-0 opacity-0" >0°</div>
			<div class="cropper h-full w-full  absolute top-0 left-0 z-2" id="cropper-container">
				<img class="absolute  opacity-0">
			</div>
			<div class="ThreeView h-full w-full absolute top-0 left-0 z-1" id="container"></div>
		</div>
		<!-- table-->
		<div class="w-full h-14  flex  justify-center flex-shrink-0  border-b relative " id="table">
			<div class=" hidden flex justify-evenly justify-center items-center w-full h-full absolute" id="cuttable">
				<div class="w-full h-full ">
					<div class="ruler-wrap w-full h-full" id="rulercutrotate"></div>
				</div>
			</div>
			<div class=" hidden flex flex-col justify-center items-center w-full h-full absolute " id="findseedtable">
				<div class="flex flex-col w-full my-2">
					<div class="flex justify-between items-center mx-2" >
						<div class="mb-2 text-center text-gray-600">查找循环</div>
						<div class="h-4 px-2 text-xs text-center text-white bg-black rounded-full w-10" id="scalerangepercentage"> 20 </div>
					</div>
					<div class="flex justify-between items-center mx-5">
					<input type="range" min="1" max="100" value="20" step="1" class="range range-md" id="scalerange" /> 
					</div>
				</div>
				<div class="flex flex-col w-full my-2 ">
					<div class="flex justify-between items-center mx-2">
						<div class="mb-2 text-center text-gray-600">光影均衡</div>
						<div class="h-4 px-2 text-xs text-center text-white  bg-black rounded-full w-10" id="equlizerpercentage"> 100 </div>
					</div>
					<div class="flex justify-between items-center mx-5">
					<input type="range" min="-100" max="100" value="1" step="1" class="range range-md" id="equlizer" /> 
					</div>
				</div>
				<div class="flex flex-col w-full my-2 hidden">
					<div class="flex justify-between items-center mx-2">
						<div class="mb-2 text-center text-gray-600">边缘修复</div>
						<div class="h-4 px-2 text-xs text-center text-white  bg-black rounded-full w-10" id="eclosionpercentage" > 0 </div>
					</div>
					<div class="flex justify-between items-center mx-5">
					<input type="range" min="-100" max="100" value="0" step="1" class="range range-md" id="eclosion" /> 
					</div>
				</div>
				<div class="flex flex-col w-full my-2 hidden">
					<div class="flex justify-between items-center mx-2">
						<div class="mb-2 text-center text-gray-600">花型缩放</div>
						<div class="h-4 px-2 text-xs text-center text-white  bg-black rounded-full w-10" id="scalepercentage" > 1 </div>
					</div>
					<input type="range" min="1" max="5" value="0" step="1" class="range range-md" id="scale" /> 
				</div>
		
			</div>
		</div>
		<!-- menu -->
		<div class="w-full h-14 flex justify-evenly mb-5 mt-2 flex-shrink-0 relative ">
			<div class="w-full h-full  flex justify-evenly mb-5 absolute " id="menu">
				<button class="items-center focus:outline-black flex flex-col" id="cut-btn">
					<svg class="h-8 w-8" viewBox="0 0 512 512" fit="" height="100%" width="100%"
						preserveAspectRatio="xMidYMid meet" focusable="false">
						<path fill="none" d="M0 0h24v24H0V0z"></path>
						<path stroke="null" id="svg_2"
							d="m172.096509,342.920775c-13.585846,-11.406767 -33.914939,-9.626627 -45.314984,3.966514c-11.426492,13.626041 -9.655265,33.907042 3.964177,45.342417c13.603716,11.421786 33.887062,9.660957 45.314984,-3.967229c11.40076,-13.593856 9.62167,-33.934219 -3.964177,-45.341701zm-12.46221,31.551164c-3.800492,4.531524 -10.576617,5.123712 -15.104756,1.32241c-4.539575,-3.8106 -5.131414,-10.57141 -1.32163,-15.113662c3.787626,-4.51722 10.561607,-5.136585 15.104756,-1.32241c4.528854,3.801302 5.121407,10.582138 1.32163,15.113662z">
						</path>
						<path stroke="null" id="svg_3"
							d="m346.571028,342.920775c-13.586561,11.406767 -15.364937,31.74713 -3.965606,45.341701l0.000715,0c11.363592,13.550944 31.686966,15.408326 45.314984,3.966514c13.618726,-11.433229 15.392098,-31.71423 3.964891,-45.341701c-11.425778,-13.62461 -31.694828,-15.402604 -45.314984,-3.966514zm27.567682,32.872859c-4.530283,3.802017 -11.306409,3.208399 -15.106186,-1.32241c-3.799777,-4.531524 -3.206508,-11.311645 1.322345,-15.113662s11.28711,-3.22914 15.105471,1.32241c3.808354,4.542252 3.217945,11.302347 -1.32163,15.113662z">
						</path>
						<path stroke="null" id="svg_4"
							d="m424.7395,319.304784c-26.629889,-31.754997 -73.998439,-35.903172 -105.735439,-9.256153c-2.782643,2.335852 -5.37301,4.892701 -7.797548,7.701302l-9.988353,-11.565542l101.380277,-120.445845c20.399141,-24.324757 23.289001,-59.042123 7.192128,-86.390757c-3.769041,-6.403209 -12.712384,-7.095525 -17.44638,-1.457583c-21.029578,25.040675 -84.567194,100.495983 -133.233787,158.27935l-132.759887,-158.309388c-4.727563,-5.637942 -13.67162,-4.95993 -17.448524,1.445425c-16.126894,27.356501 -13.24704,62.091032 7.165682,86.432954l100.960701,120.39149c-3.716862,4.412085 -6.976265,8.282047 -9.679567,11.491161c-2.393087,-2.757821 -4.946286,-5.271759 -7.686042,-7.57185c-31.701261,-26.616266 -79.133427,-22.464515 -105.735439,9.256153c-26.629174,31.753567 -22.485587,79.151476 9.250698,105.79778c25.712824,21.588392 61.767818,22.952283 88.692196,5.737356c6.395862,-4.089529 12.129837,-9.133853 17.031807,-14.978489l50.216239,-59.659343l50.635815,59.644324c26.516953,31.621254 73.938397,35.952521 105.735439,9.256153c31.701261,-26.616981 35.850566,-74.077828 9.249984,-105.798495zm-27.415433,-194.005867c3.733302,16.136402 -0.134379,33.509389 -11.13915,46.632642l-127.085954,150.984998l-14.051884,-16.756483c35.190108,-41.777847 116.325638,-138.11135 152.276988,-180.861158zm-264.829296,46.647661c-11.022641,-13.143994 -14.889607,-30.52914 -11.147013,-46.671978l123.73506,147.548449c-4.947716,5.874674 -9.649546,11.456116 -14.026866,16.653493l-98.56118,-117.529964zm59.993016,230.108581c-3.51315,4.188227 -7.605987,7.790702 -12.164861,10.705153c-19.730106,12.616174 -45.206337,11.148579 -63.36178,-4.09382c-22.644269,-19.012232 -25.608466,-52.912121 -6.607437,-75.569741c18.951709,-22.598973 52.82519,-25.670053 75.525927,-6.611333c4.384468,3.681148 8.155654,8.269888 11.528706,14.027269c3.735447,6.376747 12.675215,7.152742 17.447809,1.489052c0.303782,-0.360462 6.347972,-7.535375 16.163347,-19.188171l14.057602,16.762919l-52.589312,62.478672zm209.217888,6.611333c-22.644983,19.012232 -56.525613,16.045571 -75.567384,-6.660682l-53.013178,-62.445057l14.104778,-16.757198l16.666553,19.298313c4.799041,5.557124 13.650891,4.7468 17.362035,-1.58918c3.373053,-5.757381 7.144238,-10.346121 11.528706,-14.027269c22.657135,-19.021529 56.513461,-16.05916 75.525927,6.611333c19.000314,22.656904 16.036116,56.557509 -6.607437,75.569741z">
						</path>
						<path stroke="null" id="svg_5"
							d="m259.333411,118.912158c5.921248,0 10.721718,-4.803301 10.721718,-10.72804l0,-21.456079c0,-5.924739 -4.800471,-10.72804 -10.721718,-10.72804s-10.721718,4.803301 -10.721718,10.72804l0,21.456079c0,5.924739 4.800471,10.72804 10.721718,10.72804z">
						</path>
						<path stroke="null" id="svg_6"
							d="m259.333411,183.280395c5.921248,0 10.721718,-4.803301 10.721718,-10.72804l0,-21.456079c0,-5.924739 -4.800471,-10.72804 -10.721718,-10.72804s-10.721718,4.803301 -10.721718,10.72804l0,21.456079c0,5.924739 4.800471,10.72804 10.721718,10.72804z">
						</path>
					</svg><span class="btm-nav-label">裁剪</span>
				</button>
				 <button class="items-center focus:outline-black flex flex-col" id="findseed-btn">
					<svg class="h-8 w-8" viewBox="0 0 512 512" fit="" height="100%" width="100%"
					preserveAspectRatio="xMidYMid meet" focusable="false">
					<path stroke="null" id="svg_1"
						d="m199.046873,190.207032l60.953124,0l0,54.292969l-60.953124,0l0,-54.292969zm0,0"></path>
					<path stroke="null" id="svg_2"
						d="m259.999997,244.500001l60.218749,0l0,54.955078l-60.218749,0l0,-54.955078zm0,0"></path>
					<path stroke="null" id="svg_3"
						d="m403.203121,75l-22.03125,0l0,40.388672l-242.343747,0l0,-40.388672l-22.03125,0l0,40.388672l-44.796874,0l0,19.863281l44.796874,0l0,218.496095l-44.796874,0l0,19.863281l44.796874,0l0,40.388672l22.03125,0l0,-40.388672l242.343747,0l0,40.388672l22.03125,0l0,-40.388672l44.796874,0l0,-19.863281l-44.796874,0l0,-218.496095l44.796874,0l0,-19.863281l-44.796874,0l0,-40.388672zm-22.03125,115.207032l-60.953124,0l0,54.292969l60.953124,0l0,54.955078l-60.953124,0l0,54.292969l-60.218749,0l0,-54.292969l-60.953124,0l0,54.292969l-60.218749,0l0,-54.292969l60.218749,0l0,-54.955078l-60.218749,0l0,-54.292969l60.218749,0l0,-54.955078l60.953124,0l0,54.955078l60.218749,0l0,-54.955078l60.953124,0l0,54.955078zm0,0">
					</path>
				</svg><span class="btm-nav-label">拼接</span>
				</button>
			</div>
			<div class="w-full h-full flex justify-evenly mb-5 hidden items-center absolute" id="menusure" >
				<button class="px-4 py-2" id="menusure-f"><svg height="28px" width="28px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></button>
				<h3 class="text-xl font-bold" id="menusure-Ti"></h3>
				<button class="px-4 py-2" id="menusure-t"><svg height="28px" width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></button>
			</div>
		</div>
	</div>
	<script async src="./assets/opencv.js" type="text/javascript"></script>
	
</body>

</html>